@react-md/portal

@react-md/portal

The Portal component is a simple wrapper with React's createPortal API that will automatically generate portal nodes behind the scenes as needed. Unlike the majority of react-md packages, this package does not export any styles.

Installation

npm install --save @react-md/portal

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

The main purpose of the Portal is to be able to fix overflow issues for fixed elements within the page. If you have overflow set to anything other than the default value, fixed elements might not appear correctly. To work around this, you can portal that fixed element to a different part of the page and it'll fix the problem. If none of this makes sense to you at a first glance, you probably don't need this package.

The example below will just show the API for the portal and not a real world example.

import React, { useState } from "react";
import { render } from "react-dom";
import { Portal } from "@react-md/portal";

const App = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button
        id="example-button"
        type="button"
        onClick={() => setVisible((prevVisible) => !prevVisible)}
      >
        Show Portal
      </button>
      <Portal>
        {visible && (
          <h3>
            This is some portalled text that will only appear when{" "}
            <code>visible</code>
          </h3>
        )}
      </Portal>
    </>
  );
};

render(<App />, document.getElementById("root"));

Changelog

2.9.1 (2021-07-27)

Bug Fixes

• @react-md/layout: Do not unmount children when swapping to non-fixed appbar mini layouts (64103c8), closes #1207
• @react-md/utils: useMediaQuery uses addEventListener/removeEventListener (b889a9e)

Other Internal Changes

• fixed sass-lint error (58f614b)
• install: slighly reduce install size by excluding tests in publish (9d01a44)
• react-md.dev: fix links to form demos in blog (b1626b5)